<template>
	<view class="cart-container">
		<!-- 购物车商品列表 -->
		<scroll-view scroll-y class="cart-list" v-if="cartList.length > 0">
			<view class="cart-item" v-for="(item, index) in cartList" :key="item.id">
				<view class="item-select" @click="toggleSelect(index)">
					<image v-if="item.selected" src="/static/images/selected.png"></image>
					<image v-else src="/static/images/unselected.png"></image>
				</view>
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>


				<view class="item-info">
					<view class="item-title">{{item.title}}</view>
					<view class="item-spec">库存量:{{item.num}}/{{item.u_specs}}</view>
					<view class="item-spec">
						规格：{{item.specs}}
					</view>
					<view class="item-spec">配送方式:<span>京东配送</span></view>
					<!-- <view class="item-price-row">
            <text class="item-price">¥{{item.price}}</text>
            <view class="item-count">
              <text class="count-btn" @click="changeCount(index, -1)">-</text>
              <text class="count-num">{{item.count}}</text>
              <text class="count-btn" @click="changeCount(index, 1)">+</text>
            </view>
          </view> -->
				</view>
			</view>
		</scroll-view>

		<!-- 空购物车提示 -->
		<view class="empty-cart" v-else>
			<image src="/static/images/empty-cart.png" mode="widthFix"></image>
			<view class="empty-text">仓库空空如也~</view>
			<button class="go-shopping" @click="goToIndex">去逛逛</button>
		</view>

		<!-- 底部结算栏 -->
		<view class="cart-footer" v-if="cartList.length > 0">
			<view class="footer-select" @click="toggleAllSelect">
				<image v-if="allSelected" src="/static/images/selected.png"></image>
				<image v-else src="/static/images/unselected.png"></image>
				<text>全选</text>
			</view>
			<view class="r">
				<view class="footer-btn" @click="goToCheckout(0)">
					赠送
				</view>
				<view class="footer-btn" @click="goToCheckout(1)">
					京东配送
				</view>
			</view>
		</view>
	</view>
</template>
<script>
		import {
			request
		} from '@/utils/request.js'
		export default {
			data() {
				return {
					dataJson: {
						list: []
					},
					cartList: []
				}
			},
			onLoad() {
				uni.showToast({
					title: '仓库价格不做显示，如需查看价格请前往商品详情',
					icon: 'none'
				})
			},
			onShow() {
				this.getList()
			},
			computed: {
				// 全选状态
				allSelected() {
					console.log(2222, this.cartList.length > 0 && this.cartList.every(item => item.selected))
					return this.cartList.length > 0 && this.cartList.every(item => item.selected)
				},
				// 已选商品数量
				selectedCount() {
					if (this.cartList.length > 0) {
						console.log(2222, this.cartList.filter(item => item.selected).length)
						return this.cartList.filter(item => item.selected).length
					}
				},
				// 总金额
				totalPrice() {
					if (this.cartList.length > 0) {
						return this.cartList.reduce((total, item) => {
							return item.selected ? total + (item.price * item.count) : total
						}, 0).toFixed(2)
					}
				}
			},
			methods: {
				getList() {
					request({
						url: 'user/godown',
						method: 'get',
						data: {}
					}).then(res => {
						if (res.status == 200) {
							this.dataJson = res.data
							this.cartList = res.data.list.map(item => ({
							  ...item,
							  // 如果API未返回selected字段，默认设置为false
							  selected: item.selected !== undefined ? item.selected : false,
							  // 确保价格和数量是数值类型
							  price: parseFloat(item.price || 0),
							  count: parseInt(item.count || 1)
							}))
							// this.cartList = res.data.list
							// this.cartList = res.data
						}
					})
				},
				// 切换商品选中状态
				toggleSelect(index) {
					this.cartList[index].selected = !this.cartList[index].selected;
					console.log(this.cartList)
					this.$forceUpdate()
				},
	
				// 全选/反选
				toggleAllSelect() {
					const selectStatus = !this.allSelected
					this.cartList.forEach(item => {
						item.selected = selectStatus
					})
					this.$forceUpdate()
				},
				// 修改商品数量
				changeCount(index, num) {
					const newCount = this.cartList[index].count + num
					if (newCount < 1) {
						uni.showToast({
							title: '商品数量不能少于1',
							icon: 'none'
						})
						return
					}
					if (newCount > 99) {
						uni.showToast({
							title: '商品数量不能超过99',
							icon: 'none'
						})
						return
					}
					this.cartList[index].count = newCount
					this.$forceUpdate()
				},
	
				// 去结算
				goToCheckout(index) {
					if (this.selectedCount === 0) {
						uni.showToast({
							title: '请选择要结算的商品',
							icon: 'none'
						})
						return
					}
					const selectedItems = this.cartList.filter(item => item.selected)
					console.log('selectedItems',selectedItems)
					if (index == 0) {
						uni.navigateTo({
							url: '/pages/toFriend/toFriend?items=' + encodeURIComponent(JSON.stringify(selectedItems))
						})
	
					} else {
						uni.navigateTo({
							url: '/pages/checkDelivery/checkDelivery?items=' + encodeURIComponent(JSON.stringify(
								selectedItems))
						})
					}
	
				},
	
				// 去首页
				goToIndex() {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		}
</script>

<style lang="scss">
	.cart-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f7f7f7;
	}

	.cart-list {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.cart-item {
		display: flex;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.item-select {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
	}

	.item-select image {
		width: 36rpx;
		height: 36rpx;
	}

	.item-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}

	.item-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.item-spec {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;

		span {
			color: #e74c3c;
		}
	}

	.item-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.item-price {
		font-size: 32rpx;
		color: #e74c3c;
		font-weight: bold;
	}

	.item-count {
		display: flex;
		align-items: center;
	}

	.count-btn {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #ddd;
		font-size: 32rpx;
	}

	.count-num {
		width: 70rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.empty-cart {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 100rpx;
	}

	.empty-cart image {
		width: 300rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.go-shopping {
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #e74c3c;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.cart-footer {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding: 0 20rpx;

		.r {
			display: flex;

		}
	}

	.footer-select {
		display: flex;
		align-items: center;
		width: 140rpx;
	}

	.footer-select image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.footer-total {
		flex: 1;
		text-align: right;
		padding-right: 20rpx;
	}

	.total-price {
		color: #e74c3c;
		font-weight: bold;
		font-size: 32rpx;
	}

	.footer-btn {
		min-width: 150rpx;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #e74c3c;
		color: #fff;
		border-radius: 40rpx;
		margin-left: 20rpx;
	}
</style>